import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux';
import {Platform, Image, View, StatusBar, Navigator} from 'react-native';
import TimerMixin from 'react-timer-mixin';
import styles from "../utils/StyleUtils";
import * as colors from "../utils/ColorUtils";
import SplashScreen from '../screen/native/SplashNative'

export default class WelcomeScreen extends Component {
    render() {
        return (
            <View style={[styles.matchScreen, {backgroundColor: colors.colorTheme}]}>
                <StatusBar
                    animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
                    hidden={true}  //是否隐藏状态栏。
                    backgroundColor={'green'} //状态栏的背景色
                    translucent={true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
                    barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
                />
                <View>
                    <Image
                        style={styles.matchScreen}
                        source={require("../../res/images/icon_welcome_bg.jpg")}
                    />
                </View>
            </View>
        )
    }

    mixins: [TimerMixin];

    /**
     * 加载完毕之后调用
     */
    componentDidMount() {
        if (Platform.OS === 'android') {
            SplashScreen.hide();
        }

        /**
         * 参数一是一个函数
         * 参数二是持续时长
         * @type {number}
         */
        this.timer = setTimeout(
            () => {
                Actions.reset("MainScreen");
            },
            2000
        );
    }

    /**
     * 记得要在图形卸载是同时清除Timer相关事件
     */
    componentWillUnMount() {
        this.timer && clearTimeout(this.timer);
    }
}